<template>
	<div id="navMenu">
		 <el-menu
	      default-active="2"
	      class="el-menu-vertical-demo"
	      @open="handleOpen"
	      @close="handleClose"
	      background-color="#545c64"
	      text-color="#fff"
	      active-text-color="#ffd04b">
	      	<!--遍历获取到的数据-->
	      	<el-submenu  v-for='(item,key,index) in allMenus' :key='key' :index='String(index)'>
		        <!--给第一层添加数据-->
		        <template slot="title">
		          <i class="el-icon-location"></i>
		          <span>{{item.permissionDesc}}</span>
		        </template>
		        <!--给第二次添加数据-->
	          <el-menu-item  v-for='(permission,permissionIndex) in item.children' 
	          	:key='permissionIndex'  :index="String(index+'-'+permissionIndex)"
	          	@click='pushToView({name:permission.permissionDesc})'
	          	>
	          	{{permission.permissionDesc}}
	          </el-menu-item>
	        </el-submenu>
        <!--{{allMenus}}-->
    	</el-menu>
	</div>
</template>

<script>
	export default{
		methods:{
			handleOpen(){},
			handleClose(){}
		},
		mounted(){
			//获取之前登录页面登录成功前设置的,携带上的数据
			var menus = JSON.parse(localStorage.getItem('response')).permissions;
			//告知vuex该执行里面的异步函数了(commit是同步的操作,dispatch是异步的操作)
			this.$store.commit('LOADALLMENUS',menus)
		},
		//当NavMenu挂载完成的时候,获取数据
		computed:{
			//计算属性是不会改变state里面的值,执行vuex里面的getters的函数
			allMenus(){
				return this.$store.getters.allMenus;
			}
		},
	}
	
</script>

<style>
</style>